<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>vue学习</title>
    <script src="./js/vue.js"></script>
  </head>
  <body>
    <!-- 
      v-model
        .lazy
        .number
        .trim
     -->
    <div id="app">
      <div>
        <input type="text" v-validate.phone v-model="phone" />
      </div>
      <div>
        <input type="text" v-validate.email v-model="email" />
      </div>
    </div>
    <script>
      const app = Vue.createApp({
        data() {
          return {
            phone: '',
            email: ''
          }
        },
        directives: {
          // mounted / updated
          validate(el, bindings) {
            const value = el.value
            const modifiers = bindings.modifiers

            // 针对不同的修饰符进行不同的判断操作
            // 手机号码
            if (modifiers.phone) {
              if (el.value != '' && !/^1[2-9]\d{9}$/.test(value)) {
              } else {
              }
            }

            // 邮箱
            if (modifiers.email) {
              if (el.value != '' && !/\w+@\w+\.\w{2,5}/.test(value)) {
              } else {
              }
            }
          }
        }
      })
      app.mount('#app')


      // let a = '100a'
      // console.log(+a) // Number(a) // NAN
      // console.log(Number(a)) // nan
      // console.log(parseInt(a)) // 100
    </script>
  </body>
</html>
